<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>数据列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="../../lib/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../../css/hp-common.css"/>
  <script src="../../lib/jquery/jquery-2.1.4.js"></script>
</head>

<body>
	<div class="hp-div-form">
<blockquote class="layui-elem-quote">
		<form class="layui-form" id="hp-form">
		   <div class="layui-form-item hp-form-item">
		   	<div class="layui-inline hp-form-inline">
		   		 <label class="layui-form-label hp-form-label">用户名：</label>
		   		<div class="layui-input-inline" style="width: 150px;">
		   			<input type="text" name="" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		   		</div>
		   	</div>
		   	
		   	<div class="layui-inline hp-form-inline">
		   		 <label class="layui-form-label hp-form-label">城市：</label>
		   		<div class="layui-input-inline" style="width: 150px;">
							<select name="city" lay-verify="">
								<option value="">请选择一个城市</option>
								<option value="010">北京</option>
								<option value="021">上海</option>
								<option value="0571">杭州</option>
								<option value="010">武汉</option>
								<option value="021">广州</option>
								<option value="0571">南京</option>
								<option value="010">成都</option>
								<option value="010">天津</option>
								<option value="010">乌鲁木齐</option>
							</select>
		   		</div>
		   	</div>
		   	
		   	
		   	<div class="layui-inline hp-form-inline">
		   		 <label class="layui-form-label hp-form-label">职业：</label>
		   		<div class="layui-input-inline" style="width: 150px;">
		   			<input type="text" name="" placeholder="请输入职业" autocomplete="off" class="layui-input">
		   		</div>
		   	</div>
		   	
		   	<div class="layui-inline hp-form-inline">
		   		<div class="layui-input-inline" style="width: 150px;">
		   		<button class="layui-btn" type="button" ><i class="layui-icon"></i>查询</button>
		   		</div>
		   	</div>
		   	
		   </div>
		</form>
		</blockquote>
	</div>
	<div class="layui-btn-group demoTable">
  <button class="layui-btn layui-btn-normal" ><i class="layui-icon"></i>添加</button>
  <button class="layui-btn layui-btn-danger" ><i class="layui-icon"></i>删除</button>
  <button id="refrsh" class="layui-btn hp-btn-green"><i class="layui-icon">&#xe669;</i>刷新</button>
</div>

<!-- <table class="layui-table" lay-data="{cellMinWidth: 80, url:'../json/demo5.json', page:true, id:'demo',showLoad:true}" lay-filter="demo">
 <thead>
    <tr>
      <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
      <th lay-data="{field:'state', templet:stateFmt}">状态</th>
      <th lay-data="{field:'name', sort: true}">名称</th>
      <th lay-data="{field:'createTime' }">开始时间</th>
      <th lay-data="{field:'progress', templet:progressFmt, align:'center'}">进度</th>
      <th lay-data="{field:'users', templet:usersFmt}">参与者</th>
      <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#hp_toolbar'}">操作</th>
    </tr>
  </thead>
</table>  
 --> 
 
  <!-- 方法级渲染 -->
 <table class="layui-table" id="demo" lay-filter="demo">
 
</table>  
 
 
<script type="text/html" id="hp_toolbar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
            	     
</body>

<script src="../../lib/layui/layui.js"></script> 




<script>
	
	  // 格式化
  	function usersFmt (d){
			var dom=$("<div></div>");
			var html="";
			$.each(d.users,function(index,item){
				var text='<img class="layui-circle" style="margin-right:2px;width:30px;height:30px" src="'+item.img+'" />';
				html+=text;
			})
			dom.append(html);
		  return dom.prop('outerHTML') ;
	}
	
	
		function stateFmt (d){
		var checked="";;
		if(d.state==1){
			checked="checked";
		}
		
		var html= '<input   type="checkbox" name="sex" value="'+d.state
		+'"lay-skin="switch" lay-text="开启|关闭" lay-filter="sexDemo" '+checked+" />";
		return html ;
	}
	
	
	function progressFmt (d){
		var html='<div class="layui-progress layui-progress-big hp-progress"  lay-showPercent="true">' +
    '<div class="layui-progress-bar"   lay-percent="'+d.progress+'"></div>' +
    '</div>';
		return html ;
	}
  
	
	
	
	
layui.use(['table','element'], function(){
	
  var table = layui.table;
   var element = layui.element;
  var $=layui.$;
   // 方法级渲染
  table.render({
    elem: '#demo',
    url:'../json/demo5.json',
    cellMinWidth: 80,
    showLoad:true,
     page: true,
     cols: [[
      {type: 'checkbox',fixed: 'left'},
      {field:'state', templet:stateFmt,title:'状态'}, 
      {field:'name', sort: true,title:'名称'},
      {field:'createTime',title:'开始时间'},
      {field:'progress', templet:progressFmt, align:'center',title:'进度'},
      {field:'users', templet:usersFmt,title:'参与者'},
      {fixed: 'right', width:178, align:'center', toolbar: '#hp_toolbar',title:'操作'}
    ]],
    done:function(){
    	//console.log(111111111)
    	element.render('progress'); 
    }
  });
  
  
  
  
  
    // 表格刷新
   $("#refrsh").click(function(){
   	      //执行重载
      table.reload('demo', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          // 参数
          kd:'kd'
        },done:function(){
        	element.render('progress'); 
        }
      });
   	
   })
   
   //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  
  //监听单元格编辑
  table.on('edit(demo)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2
        ,value: data.name
      }, function(value, index){
        obj.update({
          name: value
        });
        layer.close(index);
      });
    }
  });
  
  //监听排序
  table.on('sort(demo)', function(obj){
    console.log(this, obj.field, obj.type)
    
    return;
    table.reload('idTest', {
      initSort: obj
      ,where: { //重新请求服务端
        key: obj.field //排序字段
        ,order: obj.type //排序方式
      }
      //,height: 300
    });
  });
  
   

   
  
})
</script>
</body>
</html>
